<template>
  <el-row :gutter="6">
    <el-col :span="8">
      <div class="grid-content" @click="toHome">
        <span>校园二手交易平台</span>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content">
        <form>
          <el-input placeholder="请输入内容" v-model="keyword" clearable>
            <el-button
                type="primary"
                slot="append"
                @click="toSearch"
                icon="el-icon-search"
            >搜索
            </el-button
            >
          </el-input>
        </form>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content">
        <router-link class="login" to="/login" v-show="!token"
        >点击登录
        </router-link
        >
        <router-link class="register" to="/register" v-show="!token"
        >点击注册
        </router-link
        >
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {mapState, mapGetters} from "vuex";

export default {
  name: "Header",
  data() {
    return {
      keyword: "",
    };
  },
  computed: {
    ...mapState({
      showLogin: (state) => state.header.showLogin,
      showRegister: (state) => state.header.showRegister,
      showLogout: (state) => state.header.showLogout,
    }),
    ...mapGetters(['token'])
  },
  methods: {
    toHome() {
      this.$router.push("home");
    },
    // 向search搜索路由进行跳转
    toSearch() {
      this.$router.push({
        name: "search",
        query: {
          keyword: this.keyword || undefined,
        },
      });
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  height: 100px;
  display: flex;
  /*定义子级元素垂直居中*/
  align-items: center;
  overflow: hidden;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  color: #ffffff;

  span {
    font-size: 26px;
    cursor: pointer;
  }

  .el-input {
    width: 90%;

    .el-button {
      background-color: rgb(219, 237, 243);

      span {
        font-size: 12px;
        color: #303133;
      }
    }
  }

  .login,
  .logout,
  .register {
    color: #ffffff;
  }

  .register {
    margin-left: 20px;
  }
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
